<template>
	<view>
		<!-- 背景图片 -->
		<view class="bg-image"><image src="../../static/image1.png" mode=""></image></view>
		<!-- 背景图片 -->
		<view class="container auto">
			<view class="dflex jcc mt56">
				<u-field
					label="您的姓名"
					type="text"
					placeholder="请输入您的姓名"
					placeholder-style="color:#BBBBBB;fontSize:32rpx"
					:clearable="false"
					v-model="name"
				></u-field>
			</view>

			<view class="dflex jcc mt36">
				<u-field
					label="联系方式"
					type="text"
					placeholder="请输入您的联系方式"
					placeholder-style="color:#BBBBBB;fontSize:32rpx"
					:clearable="false"
					v-model="phone"
				></u-field>
			</view>

			<!-- 选择项目 -->
			<view class="dflex jcc mt36 posir" @click="show = true">
				<u-field
					v-model="project"
					label="选择项目"
					type="text"
					disabled
					placeholder="请选择产品项目"
					placeholder-style="color:#BBBBBB;fontSize:32rpx"
					:clearable="false"
				></u-field>
				<view
					style="position: absolute;bottom: 10rpx;right: 50rpx;transform: translate(-50%,-50%);"
				>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<!-- 选择项目 -->
			<!-- 认购金额 -->
			<view class="dflex jcc mt36">
				<u-field
					label="认购金额"
					type="text"
					placeholder="请输入认购金额"
					placeholder-style="color:#BBBBBB;fontSize:32rpx"
					:clearable="false"
					v-model="money"
				></u-field>
			</view>
			<!-- 认购金额 -->
			<view class="dflex jcc mt36 posir" @click="showDate = true">
				<u-field
					label="预约时间"
					type="text"
					disabled
					placeholder="请选择时间"
					placeholder-style="color:#BBBBBB;fontSize:32rpx"
					:clearable="false"
					v-model="date"
				></u-field>
				<view
					style="position: absolute;bottom: 10rpx;right: 50rpx;transform: translate(-50%,-50%);"
				>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</view>
			</view>
		</view>
		<!-- 现在项目的 -->

		<u-popup v-model="show" mode="bottom" height="700">
			<view v-for="(item, index) in dateList" class="popub-item" @click="handerItem(item)">
				{{ item.title }}
			</view>
		</u-popup>

		<!-- 选择时间的 -->
		<u-calendar v-model="showDate" mode="date" @change="change" max-date="2050-1-1"></u-calendar>
		<!-- 预约按钮 -->
		<view class="btn auto white fw900 fs32 textc" @click="handerSubmit">确认预约</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { selectProject, addScheduled } from '@/utils/api.js';

let show = ref(false); //选择项目开关
let showDate = ref(false); //选择日期
let name = ref(''); //姓名
let phone = ref(''); //手机号
let project = ref(''); //选择的项目
let projectId = ref(''); //选择的项目的id
let money = ref(''); //钱
let date = ref(''); //时间
let dateList = ref([]);
const getProject = () => {
	selectProject().then(res => {
		if (res.code === 1) {
			dateList.value = res.data;
		}
	});
};
const handerItem = item => {
	project.value = item.title;
	projectId.value = item.id;
	show.value = false;
};
let change = e => {
	console.log(e.result);
	date.value = e.result;
};
//提交预约
const handerSubmit = () => {
	let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
	if (!name.value) {
		return uni.showToast({
			title: '请输入您的姓名',
			icon: 'none'
		});
	}
	if (!phone.value) {
		return uni.showToast({
			title: '请输入您的手机号',
			icon: 'none'
		});
	}
	if (!reg.test(phone.value)) {
		return uni.showToast({
			title: '请输入合法的手机号',
			icon: 'none'
		});
	}
	if (!project.value && !projectId.value) {
		return uni.showToast({
			title: '请选择项目',
			icon: 'none'
		});
	}
	if (!money.value) {
		return uni.showToast({
			title: '请填写认真金额',
			icon: 'none'
		});
	}
	if (!date.value) {
		return uni.showToast({
			title: '请选择你要预约的时间',
			icon: 'none'
		});
	}
	let data = {
		username: name.value,
		mobile: phone.value,
		goods_id: projectId.value,
		scheduledtime: date.value,
		money: money.value
	};
	addScheduled(data).then(res => {
		if (res.code == 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/my/my'
				});
			}, 1000);
		} else {
			return uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
	});
};
onMounted(() => {
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
	getProject();
});
</script>

<style scoped lang="scss">
page {
	background-color: #f6f7fa;
}
.bg-image {
	width: 750rpx;
	height: 397rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.container {
	width: 690rpx;
	height: 708rpx;
	background: #fff;
	border-radius: 30rpx;
	margin-top: -83rpx;
	position: relative;
	padding: 1rpx;
}
:deep(.u-label-text) {
	font-size: 30rpx;
	color: #313131;
}
.btn {
	width: 594rpx;
	height: 90rpx;
	line-height: 90rpx;
	position: fixed;
	background: linear-gradient(137deg, #f65249 0%, #e1251b 100%);
	border-radius: 15rpx;
	bottom: 20rpx;
	left: 50%;
	transform: translateX(-50%);
}

.popub-item:nth-child(1) {
	margin-top: 50rpx;
}
.popub-item {
	width: 750rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}
</style>
